<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户注册</title>
  <link href="/css/register.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.3.js"></script>
  <script>
    //传递用户名至后端
    function checkUser(user_name){
      $.ajax({
        url:'/checkUserExist',
        type:'POST',
        data:{
          username:user_name
        },
        success:function (result){
          $("#msg").text(result.msg);
        }
      })
    }
  </script>
</head>

<body>

<!--头部-->
<header>
  <div class="title">广东海洋大学体育馆管理系统</div>
  <div class="guide">
    <div class="item">用户注册</div>
  </div>

  <div class="button">
    <button onclick="location='login.html'">登录</button>
    <a class="nav-link" onclick="location='register.html'">注册</a>
  </div>
</header>


<!--注册框样式-->
<div class="wrap">
  <!--左侧图片样式-->
  <div class="sidebar">
    <p><img src="images/back.jpg" width="550" height="396" alt="" /></p>
  </div>
  <!--右侧注册框样式-->
  <div class="container">
    <form action="/doRegister" method="post">
      <!-- main begin-->
      <div class="container">
        <h1>用户注册</h1>
        <dl>
          <dd class="item1">
            <label> <small>*</small>&nbsp;用户名:</label>
            <input type="text" id="username" name="username" value="" onblur="checkUser(this.value)" />
            <span id="msg"></span>
            <div class="descrip">用户名要求不低于6个字符</div>
          </dd>
          <dd class="item2">
            <label> <small>*</small>&nbsp; 密&nbsp;&nbsp;码:</label>
            <input type="password" name="userpassword" value="" />
            <div class="descrip">密码要求不低于6个字符</div>
          </dd>
          <dd class="item3">
            <label> <small>*</small>&nbsp;身&nbsp;&nbsp;份:</label>
            <input name="userisadmin"  type="radio" class="radioBtn" value="0"/>学生/教职工
            <input type="radio" name="userisadmin" class="radioBtn"  value="1" />体育馆管理员
          </dd>
          <dd class="item2">
            <label> <small>*</small>&nbsp;学&nbsp;&nbsp;&nbsp;&nbsp;号:</label>
            <input type="text" name="usernum" value="" />
            <div class="descrip">老师可填写教职工号</div>
          </dd>
          <dd class="item2">
            <label> <small>*</small>&nbsp;电&nbsp;&nbsp;&nbsp;&nbsp;话:</label>
            <input type="text" name="useriphone" value="" />
            <div class="descrip">电话号码必填</div>
          </dd>

          <dd class="agree">
            <label>&nbsp;</label>
            <input name=""  type="checkbox" id="checkbox" />
            <label>我同意<a onclick="confirm('这是广东海洋大学体育馆管理守则！')">《服务条款》</a></label>
          </dd>
          <dd class="item4">
            <label>&nbsp;</label>
            <input name="" type="submit" value="立即注册"/>
            <span style="margin-left: 20px; color: #f42d2d" th:text="${errorMsg}"></span>
          </dd>
        </dl>
      </div>
      <!-- main end-->
      <!-- footer begin-->
    </form>
  </div>


</div>
</body>
</html>
